import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../core/providers/welcome_header_provider.dart';

class FancyHeader extends ConsumerStatefulWidget {
  const FancyHeader({
    super.key,
    required this.title,
    this.subtitle,
    this.icon,
    this.height = 140,
  });

  final String title;
  final String? subtitle;
  final IconData? icon;
  final double height;

  @override
  ConsumerState<FancyHeader> createState() => _FancyHeaderState();
}

class _FancyHeaderState extends ConsumerState<FancyHeader> {
  @override
  Widget build(BuildContext context) {
    final isVisible = ref.watch(welcomeHeaderProvider);

    // 如果不可见，返回空容器
    if (!isVisible) {
      return const SizedBox.shrink();
    }

    final ColorScheme cs = Theme.of(context).colorScheme;
    return Container(
      height: widget.height,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [cs.primaryContainer, cs.secondaryContainer],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: const BorderRadius.only(
          bottomLeft: Radius.circular(24),
          bottomRight: Radius.circular(24),
        ),
      ),
      child: Stack(
        children: [
          Positioned(
            right: -20,
            top: -20,
            child: _bubble(cs.primary.withOpacity(0.15), 120),
          ),
          Positioned(
            left: -30,
            bottom: -30,
            child: _bubble(cs.secondary.withOpacity(0.12), 140),
          ),
          // 关闭按钮
          Positioned(
            top: 8,
            right: 8,
            child: GestureDetector(
              onTap: () {
                ref.read(welcomeHeaderProvider.notifier).hide();
              },
              child: Container(
                width: 32,
                height: 32,
                decoration: BoxDecoration(
                  color: cs.onPrimaryContainer.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(16),
                ),
                child: Icon(
                  Icons.close,
                  size: 18,
                  color: cs.onPrimaryContainer.withOpacity(0.8),
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  width: 56,
                  height: 56,
                  decoration: BoxDecoration(
                    color: cs.primary,
                    borderRadius: BorderRadius.circular(16),
                  ),
                  child: Icon(
                    widget.icon ?? Icons.emoji_emotions,
                    color: Colors.white,
                  ),
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        widget.title,
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.w800,
                          color: cs.onPrimaryContainer,
                        ),
                      ),
                      if (widget.subtitle != null) ...[
                        const SizedBox(height: 4),
                        Text(
                          widget.subtitle!,
                          style: TextStyle(
                            fontSize: 13,
                            color: cs.onPrimaryContainer.withOpacity(0.85),
                          ),
                        ),
                      ],
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _bubble(Color color, double size) => Container(
    width: size,
    height: size,
    decoration: BoxDecoration(color: color, shape: BoxShape.circle),
  );
}
